<template>
  <div class="mdv-dashboard-index">
    {{ token }}

    <p v-if="!token">
      <a href="javascrip:;" @click="login">登入</a>
    </p>
    <p v-if="!!token">
      <a href="javascrip:;" @click="logout">退出</a>
    </p>
  </div>
</template>

<script>
import store from '@/stores/'
import * as types from '@/stores/types'

export default {
  name: 'MdvDashboardIndex',
  data () {
    return {
      loading: false
    }
  },
  computed: {
    token () {
      return store.state.common.token
    }
  },
  mounted () {
  },
  methods: {
    login () {
      this.loading = true
      store.dispatch(types.COMMON_LOGIN, {'name': 'MdvDashboardIndex'})
        .then((res) => {
          console.log('dispatch over')
          this.loading = false
        })
        .catch((res) => {
          this.$warn(res)
        })
    },
    logout () {
      store.dispatch(types.COMMON_LOGOUT, {'name': 'MdvDashboardIndex'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.mdv-dashboard-index {
}
</style>
